import React from 'react';
import { SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import type { ScreenType } from '@/types';
import { flat } from '@utils/arrUtils';
import ListPage from '@common/listPage';
import LanguageSwitch from "@common/languageSwitch"
import examples from './examples';

const Stack = createNativeStackNavigator();

const HomePage: React.FC = () => {

    const screenList: ScreenType[] = flat(examples);

    const HomeScreen: ScreenType['component'] = ({ navigation }) => {
        return (
            <>
                {ListPage({
                    title: t('homePage.topTitle'),
                    list: examples,
                    navigation,
                })}
            </>
        );
    };

    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">
                <Stack.Screen name="Home" component={HomeScreen} options={{
                    headerRight: LanguageSwitch
                }} />
                {screenList.map((item) => (
                    <Stack.Screen
                        key={item.id}
                        name={item.id}
                        component={item.component}
                        options={{
                            title: item.name,
                            headerRight: LanguageSwitch
                        }} />
                ))}
            </Stack.Navigator>
        </NavigationContainer>
    );
};

const App: React.FC = () => {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            <HomePage />
        </SafeAreaView>
    );
};

export default App;